@(movies: List[Movie], saleForm: Form[SaleForm])(implicit lang: Lang)

@main("The Cult Cinema Inc. Movie"){

	<section style="padding-top:60px">
				<div class="row">
					<div class="span12">
						<ul class="breadcrumb">
							<li><a href="@routes.Application.index(lang.code)">@Messages("home")(lang)</a> <span class="divider">/</span></li>
		        			<li class="active">@Messages("staff.sale")(lang)</li>
		        		</ul>
					</div>
				</div>
				<div class="row">
					<div style="position:fixed;right:5%;bottom:20%;">
						@helper.form(action = routes.Staff.ticketing()) {
					        <input type="hidden" id="saleSession" name="session" value="">
					        <input type="hidden" name="lang" value="@lang.code">
							<input type="submit" class="btn btn-info" style="height:60px" value="@Messages("movie.continue")(lang)" />
						}
					</div>
					<div class="span12">

						@movies.map { movie =>
							<div class="well">
							<h3>@movie.infos.get(0).name (@movie.category.trim())</h3>
							<table class="table table-bordered table-striped table-hover">
								<thead>
									<tr>
										<th width="20%">@Messages("movie.ticket.language")(lang)</th>
										<th width="15%">@Messages("movie.date")(lang)</th>
										<th width="40%">@Messages("movie.time")(lang)</th>
										<th width="10%">@Messages("movie.ticket.house")(lang)</th>
										<th width="10%">@Messages("movie.ticket.price")(lang)</th>
										<th width="5%">@Messages("movie.select")(lang)</th>
									</tr>
								</thead>
								<tbody>
									@movie.sessions.map { session =>
										<tr>
											<td>@Messages("movie.language",session.lang)(lang)</td>
											<td>@session.showtime.format("yyyy-MM-dd")</td>
											<td>@session.showtime.format("hh:mmaa") - @(new Date(session.showtime.getTime()+(60*1000*session.movie.duration)).format("hh:mmaa")) (@(session.movie.duration)@(Messages("movie.minutes")(lang)))</td>
											<td>@session.house.id</td>
											<td>$@session.price</td>
											<td><button type="button" data-session="@session.id" style="width:45px" class="sale btn btn-primary"><i class='icon-plus'></i></button></td>
										</tr>
									}
								</tbody>
							</table>
							</div>
						}
					</div>
				</div>
  			</section>

  			<script>
  				$("button.sale").click(function(e){
  					if($(this).hasClass("active")){
	  					$(this).html("<i class='icon-plus'></i>");
  					} else {
	  					$(this).html("<i class='icon-ok'></i>");
  					}

	  				$(this).toggleClass("btn-success");
	  				$(this).toggleClass("active");

	  				var sessions = new Array();
					$("button.sale.active").each(function(){
						sessions.push($(this).data("session"));
					});

					$("input#saleSession").val(sessions.join(','));
  				});
  			</script>

}(lang)
